import {View, Text} from "@tarojs/components";
import {Button, Dialog, Image} from "@antmjs/vantui";
import AssetImage from "@/common/AssetImage";
import {useState, useImperativeHandle, forwardRef, useCallback, useRef} from "react";
import Utils from "@/utils/common";
import LocalData from "@/common/local_data";

// 使用 forwardRef 包裹组件，使其可以接收 ref
const KefuDialog = forwardRef((props, ref) => {
  const [show, setShow] = useState(false);

  // 使用 useImperativeHandle 暴露 setShow 方法给父组件
  useImperativeHandle(ref, () => ({
    setShow: (value: boolean) => {
      setShow(value);
    }
  }));

  const phoneNum = useRef(LocalData.servicePhone);


  const callPhone = useCallback(() => {

    Utils.makePhoneCall(phoneNum.current)
  }, []);

  return (
    <View>
      <Dialog
        id='vanDialog3'
        title='联系客服'
        showConfirmButton={false}
        show={show}
        onClose={() => setShow(false)}
      >
        <View style={{
          display: 'flex',
          justifyContent: 'center',
          flexDirection: 'column',
          alignItems: 'center',
          padding: '0 20px 20px 20px'
        }}>
          <Image
            showMenuByLongpress
            height='240px'
            width='240px'
            src={AssetImage.qrCodeWx}
          ></Image>
          <Text style={{
            textDecoration: 'underline',
            color: 'grey'
          }}>长按二维码添加客服</Text>
          <Button
            icon='phone'
            type="info"
            onClick={() => {
              callPhone()
            }}
            style={{marginTop: '10px'}}
          >
            {phoneNum.current}
          </Button>
        </View>
      </Dialog>
    </View>
  );
});

export default KefuDialog;
